<template >
    <div class="channel-edit">
        <!-- 我的频道和编辑模块 -->
        <van-cell value="内容"  center :border=false>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title >
                <span class="channel-title">我的频道</span>
            </template>
            <template >
                <van-button  plain 
                type="danger" round 
                size="mini" 
                class="edit"
                @click=" isEdit = !isEdit"
                >{{isEdit ? '完成' : '编辑'}}</van-button>
            </template>
        </van-cell>

    <!-- 我的频道宫格模块 -->
        <van-grid :gutter="10">
            <van-grid-item class="grid-item" 
            v-for="(item , index) in userChannels" 
            :key="item.id"  
            :text="item.name"  
            :icon="isEdit && index != 0 ?  'close' : '' "
            @click="onUserClick(index)"
            >
            </van-grid-item>
        </van-grid>


        <!-- 我的频道和编辑模块 -->
        <van-cell  center :border=false>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title >
                <span >频道推荐</span>
            </template>
        </van-cell>
    <!-- 频道推荐宫格模块 -->
        <van-grid :gutter="10">
            <van-grid-item class="grid-item" v-for="item in recommendChannels" :key="item.id" :text="item.name" @click="add(item)">
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script>
//导入请求全部频道的模块
import { 
    getAllChannels ,
    addUserChannel
} from '@/api/channnel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
    name: 'ChannelEdit',
    data(){
        return {
            allChannels: [], //所有的频道列表
            isEdit: false  //控制编辑我的频道

        }
    },
    created(){
        this.loadAllChannels()
    },
    methods: {
        async loadAllChannels(){
            const { data }  = await getAllChannels()
            console.log('全部频道');
            console.log(data);
            this.allChannels = data.data.channels
        },
        // 点击添加到我的频道
        add(item){
                this.userChannels.push(item)

            //判断是否登录   
            if(this.user){
            //存到线上
            addUserChannel({
                channels: [
                    {
                        id: item.id,
                        seq: this.userChannels.length
                    }
                ]
            })

            console.log('你好我处于登录状态');
            }else{
            //cun到本地存储
            setItem('userChannels',this.userChannels)
            console.log('我么有处于登录状态');
            }
        },
        // 点击我的频道  切换到该频道 或者删除频道
        onUserClick(index){
            if(this.isEdit && index != 0) {
         // 如果是编辑状态删除频道
            this.deleteChannel(index)
            }else{
            // 如果是非编辑状态切换频道
            this.switchChannel(index)
            }
        {}
        },
        // 删除频道
        deleteChannel(index){
            console.log('我是删除频道之后的');
             this.userChannels.splice(index , 1)
        },
        //切换频道
        switchChannel(index){
            // 1关闭遮罩
            //切换频道
            this.$emit('close')
            console.log('我是切换频道');
            this.$emit('switch', index)
        }
    },
    computed: {
        ...mapState(['user']),
        //推荐的频道列表
        recommendChannels(){
            //思路：所有的频道列表 - 用户的频道列表  数组去重
            
            return this.allChannels.filter(
                channel => {
                    //判单是否属于用户频道  返回true和false
                    return !this.userChannels.find(
                        userchannel => {
                            return userchannel.id === channel.id
                        }
                    )
                }
            )
        }
    },
    props: {
        userChannels: {
            type: Array,
        }
    }

}
</script>

<style scoped  lang="less">
    .channel-edit {
        padding-top: 54px;
        .channel-title {
            font-size: 16px;
            color: #333;
        }
        .edit{
            padding-left: 20px;
            padding-right: 20px;
            }
        /deep/ .grid-item{
            width: 80px;
            height: 43px;
        }
        /deep/.van-grid-item__content{
            background-color: #f4f5f6;
        }
        /deep/.van-grid-item__text{
            font-size: 14px;
            color: #222;
            margin-top: 0;
            white-space: nowrap;
        }
        /deep/ .van-grid-item__icon{
            font-size: 18px;
            position: absolute;
            top:-5px;
            right:-5px;
            color: #999;
            z-index: 999;
        }
    }
</style>